<style>
.user-manage-container {
    display: flex;
    padding: 100px 250px;
    background-image: url('/src/assets/image/person-center-back.jpg');
    .user-manage-option-list {
        display: flex;
        flex-direction: column;
        background: #e2e4e9;

        .user-manage-option {

            p {
                padding: 0 50px;
                margin: 15px 0;
            }
        }
    }
    .user-manage-main{
        width: calc(100% - 200px);
    }
}

a {
    color: inherit;
    text-decoration: none;
}

.optionActive {
    border-right: #b8db70 solid 5px;
    background: white;
}
</style>
<template>
    <div style="background: #f5f6f7;min-height: 100vh;">
        <HomeTop style="position: sticky;top: 0; z-index: 99;" />
        <div class="user-manage-container">
            <div class="user-manage-option-list">
                <router-link  :to="{ name: item.value }"  v-for="(item, index) in leftOption" :key="index"
                    class="user-manage-option" :class="{ optionActive: index == op }">
                    <p @click="op = index">{{ item.label }}</p>
                </router-link>
            </div>
            <div class="user-manage-main">
                <router-view />
            </div>
        </div>
    </div>
</template>
<script>
import HomeTop from '@/components/HomeTop.vue';
export default {
    components: {
        HomeTop
    },
    created() {
        const path = window.location.pathname; // 获取路径部分，例如 /personCenter/1/account/face
if (path.endsWith('/face')) {
  this.op = 1; // URL 包含 'face'
} else {
  this.op = 0; // URL 不包含 'face'
}

    },
    data() {
        return {
            op: 0,
            leftOption: [
                {
                    label: "个人资料",
                    value: "profile"
                },
                {
                    label: "我的头像",
                    value: "face"
                }
            ]
        }
    },
}
</script>